<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pastebin</title>

    <!-- 引入 jquery -->
    <script src="assets/jquery/js/jquery.min.js"></script>

    <!-- 引入 bootstrip -->
    <link rel="stylesheet"  href="assets/bootstrap3/css/bootstrap.min.css">
    <script src="assets/bootstrap3/js/bootstrap.min.js"></script>

    <!-- 引入 highlight.js -->
    <link id="code-style" rel="stylesheet" href="assets/highlight.js/styles/default.css">
    <script src="assets/highlight.js/js/highlight.min.js"></script>

    <!-- 引入 highlight-line-number -->
    <script src="assets/highlightjs-line-numbers.js/js/highlightjs-line-numbers.min.js"></script>

    <!-- 引入 Font Awesome 样式(依赖 ../fonts) -->
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" />

    <!-- 引入 clipboard -->
    <script src="assets/clipboard/js/clipboard.min.js"></script>

    <!-- 自定义 Youwant -->
    <link rel="stylesheet" href="assets/youwant/css/scrollbar.css" >
    <script src="assets/youwant/js/element.js"></script>
    <script src="assets/youwant/js/utils.js"></script>
    <style>
        .hljs-ln-numbers {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            text-align: center;
            color: #ccc;
            border-right: 1px solid #CCC;
            vertical-align: top;
            padding-right: 5px;

            /* your custom style here */
            word-break: keep-all;
        }
    </style>


</head>
<body>
    <!-- <h2 class="text-center">Pastebin</h2> -->

    <!-- Nav Bar 容器栏 -->
    <div class="container">
        <h1>Pastebin</h1>
        <nav class="navbar navbar-default navbar-inverse" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!-- 综合折叠 -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" >
                    <img class="pull-left logo" style="width: 1em" src="./assets/youwant/img/youwant-creator.png" />
                </a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <!-- <li><a href="/youwant">Youwant</a></li> -->
                    <li class="active"><a href="/pastebin">Pastebin</a></li>
                    <li><a href="/npmsearch">NPM 搜索</a></li>
                    <li><a href="/fileupload">文件上传</a></li>
                </ul>
                
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="btn-link" href="#pastebin" data-toggle="collapse" data-dismiss="collapse">
                        查看片段</a></li>
                    <li><a class="btn-link" href="#create"   data-toggle="collapse" data-dismiss="collapse">
                        创建片段</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
        
    </div>
    
    <!-- Pastebin 片段列表 -->
    <div id="pastebin" class="container collapse in">
        <div class="panel panel-default">
            <!-- 刷新/搜索 -->
            <div class="panel-heading">
                <div class="panel-title">    
                    <div class="row">
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <button type="button" class="btn btn-default" onclick="loadPastebin()">刷新</button>
                        </div>

                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pull-right">
                            <div class="input-group">
                                <div class="input-group-addon">Tags:</div>
                                <input id="tags-search" type="text" class="form-control" placeholder="Search">
                            </div>
                        </div>
                        
                        <div class="col-xs-3 col-md-3 pull-right">
                            <div class="input-group">
                                <div class="input-group-addon">标题:</div>
                                <input id="title-search" type="text" class="form-control" placeholder="Search">
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="panel-body">
                <div style="overflow-y: scroll; max-height: 500px;">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">编号</th>
                                <th>标题</th>
                                <th>作者</th>
                                <th class="text-center">Tags</th>
                                <th class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_pastebin">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Pastebin 操作 - 预览 Modal -->
    <div class="modal fade" id="modal-show">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 id="show-title" class="modal-title"></h4>
                </div>
                <div class="modal-body">

                    <pre><code id="code-show" class="hljs" style="white-space: pre; max-height: 700px; "></code></pre>
                    
                </div>
                <div class="modal-footer">
                    <button id="code-copy" type="button" class="btn btn-default" data-toggle="tooltip" title="已复制">复制</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Pastebin 创建片段 -->
    <div id="create" class="container collapse">
        <div class="panel panel-default">
            <div class="panel-heading">
                
                <!-- row -->
                <div class="row panel-title">

                    <!-- 标题: -->
                    <div class="col-xs-4 col-sm-4 col-md-3 col-lg-4">
                        <div class="input-group">
                            <div class="input-group-addon">标题:</div>
                            <input id="input-title" type="text" class="form-control" placeholder="片段标题">
                        </div>
                    </div>
                    
                    <!-- 作者: -->
                    <div class="col-xs-4 col-sm-4 col-md-3 col-lg-3">
                        <div class="input-group">
                            <div class="input-group-addon">作者:</div>
                            <input id="input-author" type="text" class="form-control" placeholder="system">
                        </div>
                    </div>

                    <!-- 预览/提交 -->
                    <div class="pull-right" style="float: right!important; padding-right: 15px;">
                        <button id="btn-preview" class="btn btn-primary"  data-toggle="modal" data-target="#modal-content-preivew">预览</button>
                        <button id="btn-ready" class="btn btn-default" data-toggle="modal" data-target="#modal-content-preivew">准备提交</button>
                    </div>
                </div>
            </div>
            <!--  -->
            <div class="panel-body">
                <!-- textarea -->
                <textarea id="code-text" class="panel-body form-control" style="resize: none; max-height: 500px" wrap="hard" rows="35" name="content" form="form-create"></textarea>
                <!-- <div id="editor"  class="lead panel-body form-control" style="resize: none; max-height: 500px ;height:500px" ></div> -->

            </div>
        </div>
    </div>
    
    <!-- Pastebin 创建/提交预览 Modal -->
    <div class="modal fade" id="modal-content-preivew">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">预览内容</h4>
                </div><!-- /.modal-header -->

                <!-- Preview/Tags/Themes -->
                <div class="modal-body">

                    <!-- Preview -->
                    <pre><code id="code-preview" class="language-plaintext" style="white-space: pre;padding:0;  min-height: 20px; max-height: 670px; "></code></pre>

                    <!-- Tags/Themes -->
                    <div class="row">
                        <!-- Tags -->
                        <div class="col-xs-5 col-sm-5 col-md-3 col-lg-4">
                            <div class="input-group">
                                <div class="input-group-addon">Tags: </div>
                                <input id="input-tags" class="form-control" type="text" name="tags" value="" placeholder="tag1|tag2" />
                            </div>    
                        </div>

                        <!-- Themes -->
                        <div class="col-xs-5 col-sm-5 col-md-4 col-lg-4">
                            <div class="input-group">
                                <div class="input-group-addon">Themes: </div>
                                <select id="select-themes" class="form-control" >
                                    <option value="default.css" >default</option>
                                </select>
                            </div>
                        </div>

                        <!-- Syntax: -->
                        <div class="col-xs-3 col-sm-3 col-md-4 col-lg-4">
                            <div class="input-group">
                                <div class="input-group-addon">语言:</div>
                                <select id="select-syntax" class="form-control">
                                    <optgroup label="Default">
                                        <option value="plaintext">Plain text</option>
                                    </optgroup>
                                    <optgroup id="opt-syntaxs" label="Code">
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    </div><!-- /.row -->
                        
                </div>   

                <!-- Close/Save -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="code-submit" type="button" class="btn btn-primary">保存</button>
                </div>

            </div>
        </div>
    </div>
   
    <!-- 页面交互处理函数库 -->
    <script src="assets/youwant/js/pastebin.js"></script>

    <script>
        // $("#pastebin").attr("class", "container collapse")
        // $("#create").attr("class", "container collapse in")
        // $('#editor').wysiwyg();

        // $("#pastebin").click("")
        // body > div:nth-child(2) > nav > div.navbar-header > a
        $(".container nav a").click(function() {
            $(".container nav a").removeClass("active");
            $(this).addClass("active");
            
            $("#pastebin").attr("class", "container collapse")
            $("#create").attr("class", "container collapse")
            
            var menu = $(this).attr("href");
            // $(menu).attr("class", "container collapsing")

            // $(menu).show();
            setTimeout(function(){
                $(menu).attr("class", "container collapsing")
            },100)
        });

        // 创建-预览-模态事件
        // registerEventHandler("#modal-content-preivew", 'shown.bs.modal', ()=>{
            // alert("Modal content")
        // })

        // 查看-预览-复制事件
        registerEventHandler("#code-copy", 'click', ()=>{
            let pastebin_uuid = $("#modal-show").attr("pastebin-uuid")
            let pastebin_content = $("#modal-show").attr("pastebin-content")
            const textCopied = ClipboardJS.copy(String(unescapeString(pastebin_content)));
        })

    </script>
</body>
</html>